<template>
	<view class="container">
		<u-navbar :border-bottom="false">
			<u-search v-model="searchText" placeholder="搜索找活、用人 搜您想用" :show-action="false" search-icon="/static/index/icon_ss_3.png" border-color="#888" bg-color="transparent"></u-search>
			<view class="area-select" slot="right">
				<text>徐州</text>
				<u-icon name="/static/arrow-down.png"></u-icon>
			</view>
		</u-navbar>
		<view class="usetypes">
			<view class="usetype-item">
				<u-icon name="/static/icon_fj_84.png" size="45"></u-icon>
				<text>附近</text>
			</view>
			<view class="usetype-item">
				<u-icon name="/static/icon_sg_85.png" size="40"></u-icon>
				<text>散工</text>
			</view>
			<view class="usetype-item">
				<u-icon name="/static/icon_jg_86.png" size="50"></u-icon>
				<text>技工</text>
			</view>
			<view class="usetype-item">
				<u-icon name="/static/icon_qy_87.png" size="50"></u-icon>
				<text>企业</text>
			</view>
		</view>
		<view class="zhaohuo-yr">
			<view class="zhankai" v-show="!showFindworkOruseworkerView" @tap="openFindworkview()">
				<u-icon name="arrow-down" size="25" color="rgba(136, 136, 136, 1)"></u-icon>
				<text>展开</text>
			</view>
			<view class="zhaohuo-view" v-show="showFindworkOruseworkerView">
				<view>
					<text>找活</text>
					<image src="/static/img_1.png" mode=""></image>
				</view>
				<view>
					<text>用人</text>
					<image src="/static/img_2.png" mode=""></image>
				</view>
			</view>
			<view class="shouqi" v-show="showFindworkOruseworkerView" @tap="closeFindworkview()">
				<u-icon name="arrow-up" size="25" color="rgba(136, 136, 136, 1)"></u-icon>
				<text>收起</text>
			</view>
		</view>
		<view class="line"></view>
		<view class="worklist">
			<u-tabs-swiper ref="worktabs" :list="worktablist" :current="tabcurrent" gutter="80" active-color="rgba(247, 158, 54, 1)" inactive-color="rgba(136, 136, 136, 1)"></u-tabs-swiper>
		    <swiper :current="tabcurrent" @transition="transition" @animationfinish="animationfinish"style="width: 100%;" :style="{height:showFindworkOruseworkerView?(scrollviewHeight-325+'rpx'):(scrollviewHeight-25+'rpx')}">
		    	<swiper-item class="swiper-item" v-for="(tabitem, tabindex) in worktablist" :key="tabitem.name">
		    		<scroll-view scroll-y style="width: 100%;" :style="{height:showFindworkOruseworkerView?(scrollviewHeight-325+'rpx'):(scrollviewHeight-25+'rpx')}">
		    				<view class="work-item">
		    					<view class="work-name">
		    						<text class="work-nametext">徐州市招水电工</text>
									<text class="workprice-text">期望薪资：200元/天</text>
		    					</view>
								<view class="work-ord">
									<text>擅长：散工、技工</text>
								</view>
								<view class="work-ord">
									<text>要求：认真、耐心人品好，好沟通...</text>
								</view>
								<view class="work-ord">
									<text>地点：徐州市鼓楼区和兴广场</text>
								</view>
								<view class="worker-info">
									<view class="workerinfo-left">
										<image src="/static/1018.png" mode=""></image>
										<text>李阿晓</text>
									</view>
									<view class="workerinfo-right">
										<u-icon name="phone" color="#fff" size="30"></u-icon>
										<text>电话联系</text>
									</view>
								</view>
		    				</view>
							<view class="work-item">
								<view class="work-name">
									<text class="work-nametext">徐州市招水电工</text>
									<text class="workprice-text">期望薪资：200元/天</text>
								</view>
								<view class="work-ord">
									<text>擅长：散工、技工</text>
								</view>
								<view class="work-ord">
									<text>要求：认真、耐心人品好，好沟通...</text>
								</view>
								<view class="work-ord">
									<text>地点：徐州市鼓楼区和兴广场</text>
								</view>
								<view class="worker-info">
									<view class="workerinfo-left">
										<image src="/static/1018.png" mode=""></image>
										<text>李阿晓</text>
									</view>
									<view class="workerinfo-right">
										<u-icon name="phone" color="#fff" size="30"></u-icon>
										<text>电话联系</text>
									</view>
								</view>
							</view>
							<view class="work-item">
								<view class="work-name">
									<text class="work-nametext">徐州市招水电工</text>
									<text class="workprice-text">期望薪资：200元/天</text>
								</view>
								<view class="work-ord">
									<text>擅长：散工、技工</text>
								</view>
								<view class="work-ord">
									<text>要求：认真、耐心人品好，好沟通...</text>
								</view>
								<view class="work-ord">
									<text>地点：徐州市鼓楼区和兴广场</text>
								</view>
								<view class="worker-info">
									<view class="workerinfo-left">
										<image src="/static/1018.png" mode=""></image>
										<text>李阿晓</text>
									</view>
									<view class="workerinfo-right">
										<u-icon name="phone" color="#fff" size="30"></u-icon>
										<text>电话联系</text>
									</view>
								</view>
							</view>
		    		</scroll-view>
		    	</swiper-item>
		    </swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText:'',
				showFindworkOruseworkerView:false,
				scrollviewHeight:0,
				worktablist:[{
					name:'推荐'
				},{
					name:'附近'
				},{
					name:'最新'
				}],
				tabcurrent:0
			}
		},
		created() {
			const windowHeight=uni.getSystemInfoSync().windowHeight;
			this.scrollviewHeight=((windowHeight-46)/uni.getSystemInfoSync().windowWidth)*750-295;
			console.log(this.scrollviewHeight)
		},
		onReady() {
            
		},
		onLoad() {
			
		},
		methods: {
			openFindworkview(){
			    this.showFindworkOruseworkerView=true;
			},
			closeFindworkview(){
				this.showFindworkOruseworkerView=false;
			},
			tabsChange(index) {
				this.tabcurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.worktabs.setDx(dx);
			},
		    animationfinish(e) {
				let current = e.detail.current;
				this.$refs.worktabs.setFinishCurrent(current);
				this.tabcurrent = current;
			}
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		.area-select{
			margin-left: 10px;
		}
		.usetypes{
			width: 680rpx;
			margin: auto;
			height: auto;
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			.usetype-item{
				width: 100rpx;
				height: 100rpx;
				display:flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				text{font-size: 26rpx;color: rgba(34, 34, 34, 1);}
			}
		}
		.zhaohuo-yr{
			width: 680rpx;
			height: auto;
			margin: auto;
			padding-top: 40rpx;
			padding-bottom: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			.zhankai{
				color: rgba(136, 136, 136, 1);
				font-size:25rpx;
				text{margin-left: 10rpx;}
			}
			.zhaohuo-view{
				width: 100%;
				height: 280rpx;
				display: flex;
				justify-content: space-between;
				view{
					width: 330rpx;
					height: 100%;
					box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.07);
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					align-items: center;
				}
				image{width: 200rpx;height:150rpx;}
				text{font-size: 35rpx;width: 100%;display: block;text-align: center;}
			}
			.shouqi{
				color: rgba(136, 136, 136, 1);
				font-size:25rpx;
				text{margin-left: 10rpx;}
				margin-top: 20rpx;
			}
		}
		.line{width: 100%;height: 15rpx;background-color: rgba(243, 243, 243, 1);}
		.worklist{
			width: 100%;
			height: auto;
			.work-item{
				width: 680rpx;
				margin: auto;
				height: auto;
				padding-top: 40rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #F1F1F1;
				.work-name{display: flex;justify-content: space-between;align-items: center;width: 100%;height: auto;}
				.work-nametext{width: 50%;font-size: 28rpx;color: rgba(34, 34, 34, 1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
				.workprice-text{font-size: 25rpx;color: rgba(255, 1, 1, 1);}
				.work-ord{width: 100%;font-size: 28rpx;color: rgba(34, 34, 34, 1);margin-top: 20rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
				.worker-info{display: flex;justify-content: space-between;align-items: center;width: 100%;height: auto;margin-top: 20rpx;}
				.workerinfo-left{
					display: flex;
					width:50%;
					height: auto;
					align-items: center;
					image{width:100rpx;height: 100rpx;border-radius: 10rpx;}
					text{flex: 1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left: 20rpx;font-size: 28rpx;}
				}
				.workerinfo-right{
					font-size:25rpx;
					border-radius:10rpx;
					background-color: rgba(14, 174, 100, 1);
					padding-left: 15rpx;
					padding-right: 15rpx;
					height:55rpx;
					line-height:55rpx;
					color: #FFFFFF;
					text{margin-left: 15rpx;}
				}
			}
		}
	}
</style>
